<script setup lang="ts">
import { RouterView } from 'vue-router'
import { ref } from 'vue'
import MenuList from '@/components/MenuList.vue'
// import Live2d from '@/components/Live2d'
import ArticleCard from '@/components/ArticleCard.vue'
import cuteImg from '@/assets/images/cute.jpg'
// import Wangeditor from './components/Wangeditor.vue'
let active = ref(false)
console.log(1111111111)
function mouseenter() {
  console.log('mouseenter');
  active.value = true
}
function mouseleave() {
  console.log('mouseleave');
  active.value = false
}
</script>


<template>
  <div class="w-1200" style="margin: auto">
    <div class="flex">

      <div class="circle " @mouseenter="mouseenter" @mouseleave="mouseleave">

        <el-avatar :src="cuteImg" class="animated base-shadow" :class="[active && 'rotateIn' || '']" :size="80" />

      </div>

    </div>
    <el-container>
      <el-aside width="200px" v-slide>

        <ArticleCard />

        <MenuList />


      </el-aside>
      <el-main>
        <!-- <Wangeditor /> -->
        <!-- <RouterView /> -->
      </el-main>
    </el-container>
  </div>
  <!-- <Live2d /> -->
</template>

<style scoped lang="scss"></style>
